<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import MaterialModal from './MaterialModal.vue'
import useModal from '@/hooks/useModal'
import Upload2 from '@/components/upload/upload.vue'
const props = defineProps<{
  show: boolean
  id: number | string
  type: number
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { store } = useModal()
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  id: props.id || '',
  matchType: 1,
  matchValue: '',
  name: '',
  replyType: '',
  replyValue: '',
  sort: 0,
  status: 0,
  type: props.type,
})
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      query.matchValue = tag.value.join(',')
      post(
        { url: '/server-base/admin/wx/reply/rule/submit', data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          if (code == 200) {
            emit('update:show', false)
            emit('confirm')
          }
          done(code == 200)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-base/admin/wx/reply/rule/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
  })
}
onMounted(() => {
  if (props.id) getInfo()
})
const options = [
  { value: 'text', label: '文本消息' },
  { value: 'image', label: '图片消息' },
  { value: 'voice', label: '录音消息' },
  // { value: 'video', label: '视频消息' },
  { value: 'mpnewsarticle', label: '图文消息' },
]
const tag = ref<string[]>([])
const onEnter = () => {
  if (!detail.matchValue) return
  tag.value.push(detail.matchValue)
  detail.matchValue = ''
}
const validator = (val, cb) => {
  nextTick(() => {
    if (tag.value.length) cb()
    else cb('请输入关键字后回车')
  })
}
const accept = computed(() => {
  if (detail.replyType == 'image') return '.jpg,.JPG,.JPEG,.jpeg,.png,.PNG'
  else if (detail.replyType == 'voice') return '.MP3,.mp3'
})
</script>
<template>
  <CDrawer v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="500px" :title="props.id ? '编辑' : '添加关键词'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-form-item label="规则名称" field="name" :rules="[{ required: true, message: '请输入规则名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.name" placeholder="请输入规则名称" />
        </a-form-item>
        <a-form-item label="关键字" field="matchValue" :rules="[{ validator }]">
          <a-space direction="vertical" style="width: 100%">
            <a-space v-if="tag.length">
              <a-tag v-for="(item, index) in tag" closable @close="tag.splice(index, 1)" color="arcoblue">{{ item }}</a-tag>
            </a-space>
            <a-input v-model="detail.matchValue" placeholder="输入后回车" @press-enter="onEnter" @blur="onEnter" />
          </a-space>
        </a-form-item>
        <a-form-item label="规则状态">
          <a-radio-group
            v-model="detail.status"
            :options="[
              { label: '启用', value: 1 },
              { label: '禁用', value: 0 },
            ]"
          />
        </a-form-item>
        <a-form-item label="消息类型" field="replyType" :rules="[{ required: true, message: '请选择消息类型' }]" :validate-trigger="['change', 'blur']">
          <a-select :options="options" v-model="detail.replyType" placeholder="请选择" />
        </a-form-item>
        <template v-if="detail.replyType == 'text'">
          <a-form-item label="回复内容" field="replyValue" :rules="[{ required: true, message: '请输入回复内容' }]" :validate-trigger="['change', 'blur']">
            <a-input v-model="detail.replyValue" placeholder="请输入回复内容" />
          </a-form-item>
        </template>
        <template v-else-if="['image', 'voice'].includes(detail.replyType)">
          <a-form-item label="上传素材" field="replyValue" :rules="[{ required: true, message: '请上传素材' }]">
            <Upload2
              :limit="1"
              :list="detail.replyValue"
              formDataFileKey="multipartFile"
              v-model:value="detail.replyValue"
              list-type="text"
              categoryId=""
              :accept="accept"
              api="/server-base/admin/wx/material/put/file"
              :form-data="{
                mediaType: detail.replyType,
              }"
            />
          </a-form-item>
        </template>
        <template v-else-if="detail.replyType == 'mpnewsarticle'">
          <a-form-item label="素材" field="replyValue" :rules="[{ required: true, message: '请选择素材' }]" :validate-trigger="['change', 'blur']">
            <a-button type="primary" @click="store.handleShow({})">选择素材</a-button>
          </a-form-item>
        </template>
      </a-form>
    </div>
  </CDrawer>
  <MaterialModal v-if="store.show" v-model:show="store.show" :type="detail.replyType" v-model:id="detail.replyValue" />
</template>
<style lang="less" scoped></style>
